@import "~styles/_global.scss";

@mixin paddingForSelectIcon($padding) {
  padding-right: $padding * 2 + $size-12;

  @media screen and (max-width: $medium) {
    padding-right: $padding + $size-12;
  }
}

.select {
  position: relative;

  &Icon {
    @include setPadding($size-0, $size-24, $size-0, $size-24);

    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: $size-0;
    color: $white;
    height: $size-20;
    width: $size-12;
    top: calc(50% - 10px);
    pointer-events: none;
  }

  select {
    @include setFontSize($size-18);
    @include setPadding($size-24, $size-0, $size-24, $size-24);
    @include paddingForSelectIcon($size-24);

    color: $white;
    font-weight: $font-weight-400;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    background-color: $white-10;
    border-radius: $size-4;
    box-shadow: $size-0 $size-2 $size-10 $black-10;
    border: none;

    &:focus {
      background-color: $white-20;
    }

    option {
      color: initial;
    }
  }
}

.label {
  @include setFontSize($size-16);
  @include linearTransition(0.25s);

  color: $white-80;
  font-weight: $font-weight-400;

  &Info {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  &Error {
    @include setMargin($size-8, $size-0, $size-0, $size-0);

    font-weight: bold;
  }

  &NoAccordion {
    @include setMargin($size-0, $size-0, $size-10, $size-0);
  }

  &Text {
    @include setMargin($size-0, $size-8, $size-0, $size-0);

    letter-spacing: 0.095em;
    text-transform: uppercase;
  }
}

.accordion {
  @include setFontSize($size-16);
  @include setMargin($size-0, $size-0, $size-10, $size-0);

  color: $white-80;
  letter-spacing: 0.095em;
  text-transform: uppercase;
  font-weight: $font-weight-400;
  flex-wrap: nowrap;
  user-select: none;
  cursor: pointer;

  + div {
    @include setMargin($size-0, $size-0, $size-10, $size-0);
  }

  &Title {
    width: 100%;
  }

  &Caret {
    @include setMargin($size-0, $size-0, $size-0, $size-8);
  }

  &Close {
    display: none;
  }
}

.error {
  font-weight: bold;
}

.tags {
  display: flex;
  flex-direction: row;

  > div {
    @include setMargin($size-0, $size-8, $size-0, $size-0);

    &:last-of-type {
      @include setMargin($size-0, $size-0, $size-0, $size-0);
    }
  }
}

.checkbox {
  @include setFontSize($size-18);

  color: $white;
  display: flex;
  flex-direction: row;
  align-items: center;
  word-break: break-all;

  > div:first-of-type {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  &Label {
    @include setMargin($size-0, $size-0, $size-0, $size-8);

    color: $white;
    text-transform: capitalize;
  }
}

.default,
.tagAutocomplete,
.password,
.location {
  @include setFontSize($size-18);
  @include setPadding($size-24, $size-24, $size-24, $size-24);
  @include linearTransition(0.25s);

  color: $white;
  background-color: $white-10;
  font-weight: $font-weight-400;
  border: none;
  border-radius: $size-4;
  box-shadow: $size-0 $size-2 $size-10 $black-10;
  width: 100%;
  box-sizing: border-box;

  &:focus,
  &:focus-within {
    background-color: $white-20;
    outline: none;
  }

  &::placeholder {
    color: $white-80;
  }
}

.small {
  .default,
  .tagAutocomplete,
  .password,
  .location {
    @include setPadding($size-18, $size-18, $size-18, $size-18);
  }

  .select {
    &Icon {
      @include setPadding($size-0, $size-18, $size-0, $size-18);
    }

    select {
      @include setPadding($size-18, $size-0, $size-18, $size-18);
      @include paddingForSelectIcon($size-18);
    }
  }
}

.large {
  .default,
  .tagAutocomplete,
  .password,
  .location {
    @include setPadding($size-26, $size-26, $size-26, $size-26);
    @include setFontSize($size-20);
  }

  .select {
    &Icon {
      @include setPadding($size-0, $size-26, $size-0, $size-26);
    }

    select {
      @include setFontSize($size-20);
      @include setPadding($size-26, $size-0, $size-26, $size-26);
      @include paddingForSelectIcon($size-26);
    }
  }

  .label,
  .accordion {
    @include setFontSize($size-18);
  }

  .checkbox {
    @include setFontSize($size-20);
  }
}

.dark {
  .default,
  .tagAutocomplete,
  .password,
  .location {
    background-color: $mulberry-70;

    &:focus,
    &:focus-within {
      background-color: $mulberry;
      color: $white;
    }

    &::placeholder {
      color: $white-80;
    }
  }

  .select {
    select {
      background-color: $mulberry-70;
      color: $white;

      &:focus {
        background-color: $mulberry;
      }
    }
  }

  .label,
  .checkbox,
  .accordion {
    color: $mulberry-90;
  }
}

.hidden {
  display: none;
}
